<html>
  <head>
    <title></title>
    <style>
    
      div.area 
      {
        background:red;
        border:4dip solid brown;
        color:yellow;
        size:300dip 40dip;
        margin:10dip;
        transition: blend linear 200ms ;
      }
      div.area:hover 
      {
        background:orange;
        color:red;
      }
      div.area.case1:hover  { transition: blend linear 400ms; }      
      div.area.case2:hover  { transition: blend cubic-in-out 400ms; }
      div.area.case3:hover  { transition: blend quad-in 400ms; }
      
      div.area.area:active 
      {
        background:yellow;
        color:red;
      }
    
    </style>
    <script type="text/tiscript"></script>
  </head>
<body>
  <div .area.case1>transition:blend linear 400ms</div>
  <div .area.case2>transition:blend cubic-in-out 400ms</div>
  <div .area.case3>hover: transition:blend quad-in 400ms<br>
                   leave: blend linear 200ms</div>

</body>
</html>
